<template>
  <div>
    <div class="container" v-if="fileSpace && !nodata" :style="'background-image: url(' + fileSpace + '/images/mgb-seckill-banner.png);'">
    <template v-if="!getCustomerId">
      <get-user-info v-if="isGetUserInfo"  @authPhoneInfo="authPhoneInfo"></get-user-info>
      <get-phone-info v-if="isGetPhoneInfo"></get-phone-info>
    </template>
    <template v-if="getCustomerId && !getPhone">
      <get-phone-info v-if="isGetPhoneInfo"></get-phone-info>
    </template>
      <div class="height-107"></div>
      <van-sticky>
        <div class="tabs-bar" v-if="fileSpace" :style="'background-image: url('+ fileSpace +'/images/mgb-seckill-b.png);'">
          <div class="tabs-tab" :class="{'tabs-tab_active': active === index}" v-for="(item, index) in tabsList" :key="index" @click="onChange(item, index)">
            <div class="font-22 font-w height-30">{{item.openTime}}</div>
            <div class="active-status">{{item.activeStatus}}</div>
          </div>
        </div>
      </van-sticky>
      <div class="main">
        <div class="section">
          <div class="countdown-wrap">
            <div class="seckill-content">
              <div class="flex flex-center height-44 border-b" v-if="!nodata">
                <div class="font-13 font-w mar-r-6" v-if="tabInfo.countdownMsg">{{tabInfo.countdownMsg}}</div>
                <div class="count-down" v-if="tabInfo.countTime > 0">
                  <van-count-down
                    use-slot
                    :time="tabInfo.countTime"
                    @change="bizChange"
                    @finish="bizFinished"
                  >
                    <template v-if="(bizTimer.days !== '00') && bizTimer.days ">
                      <span class="square-block">{{bizTimer.days}}</span>
                      <span class="square-t square-d mar-l-2 mar-r-2">天</span>
                    </template>
                    <span class="square-block">{{bizTimer.hours}}</span>
                    <span class="square-t">:</span>
                    <span class="square-block">{{bizTimer.minutes}}</span>
                    <span class="square-t">:</span>
                    <span class="square-block">{{bizTimer.seconds}}</span>
                  </van-count-down>
                </div>
              </div>
              <div class="seckill-list pad-l-15 pad-r-14" v-if="!nodata">
                <div class="seckill-goods flex flex-between mar-t-15"
                  v-for="(good, goodIndex) in scekillList" :key="goodIndex"
                  @click="$pt.navigateTo({url: '/pages/shop/detail/main?goodsId=' + good.goodsId + '&goodsType=' + good.goodsType})">
                  <div class="goods-img">
                    <img v-if="good.imageUrl" :src="good.imageUrl" class="width-110 height-112" alt=""/>
                    <div class="sell-out" v-if="good.status === 0">
                      <div class="delete-css">已移除</div>
                    </div>
                  </div>
                  <div class="goods-content height-112 mar-l-5 flex-item">
                    <div class="line-2 font-13 pad-t-5">{{good.title}}</div>
                    <div class="nameplate mar-t-24" v-if="good.distributeIncome && good.distributeIncome > 0 && getCustomerId">
                      <span class="left">分销</span>
                      <span class="right">赚{{good.distributeIncome}}元</span>
                    </div>
                    <div class="height-43" v-else></div>
                    <div class="flex flex-between mar-t--4">
                      <div class="price-row">
                        <span class="now-price font-12">￥<span class="font-18">{{good.promotionPrice}}</span></span>
                        <span class="font-over font-color-9 font-12 mar-l-3" v-if="good.sellPrice">￥{{good.sellPrice}}</span>
                      </div>
                      <!-- <div class="icon-bar" v-if="checkOwner" @click.stop="removeItem(good)">
                        <img class="width-22 height-23 mar-t--1" v-if="fileSpace && good.status === 1" :src="fileSpace + '/images/del-sty.png'"/>
                        <img class="width-22 height-23 mar-t--1" v-if="fileSpace && good.status === 0" :src="fileSpace + '/images/add-sty.png'"/>
                      </div>
                      <div v-else> -->
                        <div
                          v-if="!good.selShow"
                          @click.stop.prevent="showCart(good)"
                          :style="{color:getAppInfo.style.color5, background:getAppInfo.style.color2}"
                          class="in-cart-btn font-14">加入购物车</div>
                        <div v-else>
                          <van-stepper
                            v-model="good.goodsNum"
                            :class="'step-' + globalStyle.styleType"
                            class="goods-step"
                            min="0"
                            disable-input
                            :max="good.stock"
                            @click.stop.prevent="" @minus="onMinusGoodsNum($event, good)" @plus="onPlusGoodsNum($event, good)"
                            @change="onChangeGoodsNum($event, good)"/>
                        </div>
                      <!-- </div> -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="height-49"></div>
      <div class="foot-cart flex flex-between">
        <div class="content flex-item">
          <div class="flex flex-center">
            <van-icon class="mar-t--4" name="shopping-cart-o" size="22px" color="#999999" />
            <div class="font-13 mar-l-6">购物车<span v-if="cartBadge !== 0">({{cartBadge}})</span></div>
          </div>
          <div class="font-12 color-price">￥<span class="font-18">{{totalPrice}}</span></div>
        </div>
        <div class="go-cart" :style="'background-color:'+globalStyle.color2 + ';'" @click="$pt.switchTab({url: '/pages/shop/cart/main'})">去购物车</div>
      </div>
      <!--sku选择-->
      <get-sku-buy ref="getSkuBuy" :styleColor="globalStyle" :goodsType="goodsType" :room_id="room_id"
        :goodsData="goods" :skuPropList="skuPropList" :skuList="skuList" :values="values"
        @finished="getSkuBuyFinished" @close="getSkuBuyClose"></get-sku-buy>
    </div>
    <div class="nodata align-c" v-if="nodata">
      <img v-if="fileSpace" :src="fileSpace + '/images/mygroupbuy-noseckill.png'" class="width-250 height-174" alt=""/>
    </div>
  </div>
</template>
<script>
import GetUserInfo from '@/components/GetUserInfo'
import GetPhoneInfo from '@/components/GetPhoneInfo'
import { listPromotion, pagePromotionGoods, saveByPromotionGoodsId } from '@/api/home'
import { addShoppingCart, getProjectGoodsSku } from '@/api/shop'
import GetSkuBuy from '@/components/GetSkuBuy'
import { setFastGoods } from '@/utils/auth'
export default {
  components: { GetSkuBuy, GetUserInfo, GetPhoneInfo },
  data() {
    return {
      active: 0,
      nodata: false,
      bizEndTime: 60 * 10 * 1000,
      bizTimer: {},
      tabsList: [],
      tabInfo: {},
      serverDate: null,
      params: {
        promotionId: '',
        enterpriseId: '',
        memberId: '',
        customerId: '',
        currentPage: 1,
        size: 10
      },
      pullLoad: {
        loading: false,
        finished: false
      },
      scekillList: [],
      enterpriseId: '',
      promotionId: '',
      cartBadge: 0,
      goodsType: '',
      room_id: null,
      goods: {},
      skuPropList: [],
      skuList: [],
      values: [],
      fastGoods: [],
      goodsLoad: 0,
      globalStyle: {},
      isGetUserInfo: false,
      isGetPhoneInfo: false
    }
  },
  computed: {
    totalPrice() {
      let price = '0.00'
      this.cartBadge = 0
      this.scekillList.forEach(item => {
        let index = this.fastGoods.findIndex(listItem => {
          return listItem.goodsId === item.goodsId
        })
        if (index !== -1) {
          price = parseFloat((this.fastGoods[index].sellPrice || this.fastGoods[index].totalSellPrice) * 1 + price * 1).toFixed(2)
          this.cartBadge += this.fastGoods[index].goodsNum
        }
      })
      return price
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  mounted() {
    let getAppInfo = this.$pt.getStorageSync('appInfo')
    this.globalStyle = getAppInfo.style
    this.enterpriseId = this.getEnterpriseId || ''
    this.promotionId = this.getCurrentPage().query.promotionId || ''
    this.params.memberId = this.getMemberId
    this.params.customerId = this.getCustomerId
    this.params.enterpriseId = this.enterpriseId
    this.params.currentPage = 1
    this.scekillList = []
    this.getListPromotion()
    if (this.$pt.getStorageSync('fastGoods')) {
      this.fastGoods = this.$pt.getStorageSync('fastGoods')
    } else {
      this.fastGoods = []
    }
  },
  onPullDownRefresh() {
    // 下拉刷新
    this.$pt.pageScrollTo({
      scrollTop: 0,
      duration: 0
    })
    this.params.currentPage = 1
    this.scekillList = []
    this.getListPromotion()
    if (this.$pt.getStorageSync('fastGoods')) {
      this.fastGoods = this.$pt.getStorageSync('fastGoods')
    } else {
      this.fastGoods = []
    }
    setTimeout(() => {
      this.$pt.stopPullDownRefresh()
    }, 500)
  },
  onReachBottom() {
    // 触底刷新
    if (!this.pullLoad.finished) {
      this.pagePromotionGoods()
    }
  },
  methods: {
    onChange(item, index) {
      this.active = index
      this.tabInfo = this.tabsList[index]
      this.scekillList = []
      this.pullLoad.finished = false
      this.params.currentPage = 1
      this.pagePromotionGoods()
    },
    getListPromotion() {
      let params = {
        enterpriseId: this.enterpriseId,
        memberId: this.getMemberId,
        customerId: this.getCustomerId,
        promotionId: this.promotionId || ''
      }
      this.scekillList = []
      this.$pt.showLoading()
      listPromotion(params).then(response => {
        this.$pt.hideLoading()
        // 活动列表查询
        if (response.isError) return
        this.serverDate = response.date
        this.tabsList = response.data
        let serverTime = new Date(this.serverDate).getTime()
        let serverDate = this.$utils.formatTimeToDate(this.serverDate, 'yyyy-MM-dd')
        if (this.tabsList.length === 0) {
          this.nodata = true
          this.pullLoad.finished = true
          return
        }
        this.tabsList.forEach(value => {
          if (!value.startTime || !value.endTime) {
            return
          }
          let activeDate = this.$utils.formatTimeToDate(value.startTime, 'yyyy-MM-dd')
          let startTime = this.$utils.formatTimeStamp(value.startTime)
          let endTime = this.$utils.formatTimeStamp(value.endTime)
          value.openTime = this.$utils.formatTimeToDate(value.startTime, 'hh:mm')
          if (activeDate > serverDate) {
            value.countTime = startTime - serverTime
            value.countdownMsg = '距离本场开始'
            value.activeStatus = this.$utils.formatTimeToDate(value.startTime, 'MMdd')
          } else {
            if (startTime > serverTime) {
              value.countTime = startTime - serverTime
              value.countdownMsg = '距离本场开始'
              value.activeStatus = '即将开始'
            } else {
              value.countTime = endTime - serverTime
              value.countdownMsg = '距离本场结束'
              value.activeStatus = '抢购中'
            }
          }
        })
        this.tabInfo = this.tabsList[this.active]
        this.scekillList = []
        this.params.currentPage = 1
        this.pullLoad.finished = false
        this.pagePromotionGoods()
      })
    },
    pagePromotionGoods() {
      this.nodata = false
      this.params.promotionId = this.tabsList[this.active].promotionId
      pagePromotionGoods(this.params).then(response => {
        if (response.isError) return
        response.data.records.forEach(value => {
          value.selShow = false
          this.showFastNum(value)
          this.scekillList.push(value)
        })
        this.params.currentPage++
        if (this.scekillList.length === 0) {
          this.nodata = true
        }
        if (this.scekillList.length === 0 || this.scekillList.length >= response.data.total) {
          this.pullLoad.finished = true
        }
      })
    },
    // 头像昵称 授权后 立即跳出手机号授权
    authPhoneInfo() {
      this.isGetPhoneInfo = true
    },
    bizFinished() {
      this.getListPromotion()
    },
    bizChange(e) {
      // 秒杀倒计时
      let timer = e.mp.detail
      if (timer.days < 10) {
        timer.days = '0' + timer.days
      }
      if (timer.hours < 10) {
        timer.hours = '0' + timer.hours
      }
      if (timer.minutes < 10) {
        timer.minutes = '0' + timer.minutes
      }
      if (timer.seconds < 10) {
        timer.seconds = '0' + timer.seconds
      }
      this.bizTimer = timer
    },
    getSkuBuyClose() {
    },
    getSkuBuy(isCart, item) {
      if (this.getCustomerId) {
        if (this.shareMemberId) {
          item.shareMemberId = this.shareMemberId
        }
        const comissionFlag = this.getCurrentPage().query.comissionFlag
        this.$refs.getSkuBuy.show(item, isCart, comissionFlag, item.qty)
      } else {
        this.$pt.reLaunch({ url: '/pages/home/main' })
      }
    },
    getSkuBuyFinished(params) {
      this.goodsLoad = 0
      this.scekillList.forEach(item => {
        if (params.goodsId === item.goodsId) {
          let addCount = 0
          if (item.goodsNum) {
            addCount = item.goodsNum + params.goodsNum
          } else {
            addCount = params.goodsNum
          }
          item.selShow = true
          item.goodsNum = addCount
          this.goodsLoad++
          if (this.goodsLoad === 1) {
            this.cartBadgeEls(1, item, params)
          }
        }
      })
    },
    getProjectGoodsSku(item) {
      this.goods = this.$utils.deepClone(item)
      this.$utils.showToast({
        title: '加载中',
        icon: 'loading'
      })
      getProjectGoodsSku({
        goodsId: item.goodsId,
        customerId: this.getCustomerId,
        memberId: this.getMemberId,
        microShopFlag: item.goodsType === 30 || item.goodsType === 31 || item.goodsType === 32 ? 0 : 1
      }).then((response) => {
        if (response.isError) return
        this.$pt.hideToast()
        this.goods.skuPropList = response.data.skuPropList
        this.goods.skuList = response.data.skuList
        this.goods.values = response.data.values
        this.skuPropList = response.data.skuPropList
        this.skuList = response.data.skuList
        this.values = response.data.values
        setTimeout(() => {
          this.getSkuBuy(true, this.goods)
        }, 100)
      }).catch(() => {
      })
    },
    showCart(good) {
      if (this.getCustomerId) {
        if (this.getPhone) {
          if (good.skuFlag === 1) {
            this.skuPropList = []
            this.skuList = []
            this.values = []
            this.goods = good
            this.goodsType = good.goodsType
            this.goods.price = ''
            this.goods.price = good.promotionPrice
            this.goods.images = []
            this.goods.images[0] = good.imageUrl
            this.goods.isCart = true
            this.getProjectGoodsSku(good)
          } else {
            good.goodsNum = 1
            this.simpleSkuEls(good)
          }
        } else {
          this.isGetPhoneInfo = true
        }
      } else {
        this.isGetUserInfo = true
      }
    },
    onMinusGoodsNum(e, itemOne) {
      if (itemOne.skuFlag === 1) {
        itemOne.goodsNum = itemOne.goodsNum + 1
        const changeData = itemOne.goodsNum
        this.$delete(itemOne, 'goodsNum')
        this.$set(itemOne, 'goodsNum', changeData)
        this.$utils.showToast({ title: '该商品是多属性商品，请到购物车操作' })
      } else {
        if (itemOne.goodsNum > itemOne.stock) return this.$utils.showToast({ title: '不能大于商品库存' })
        this.goodsLoad = 0
        this.scekillList.forEach(item => {
          if (itemOne.goodsId === item.goodsId) {
            item.goodsNum = itemOne.goodsNum
            item.selShow = true
            if (!item.goodsNum) {
              item.selShow = false
            }
            this.goodsLoad++
            if (this.goodsLoad === 1) {
              this.addShoppingCart(-1, itemOne)
            }
          }
        })
      }
    },
    onPlusGoodsNum(e, itemOne) {
      if (itemOne.skuFlag === 1) {
        itemOne.goodsNum = itemOne.goodsNum - 1
        this.skuPropList = []
        this.skuList = []
        this.values = []
        this.goods = itemOne
        this.goodsType = itemOne.goodsType
        this.goods.price = ''
        this.goods.price = itemOne.promotionPrice
        this.goods.images = []
        this.goods.images[0] = itemOne.mainImage
        this.goods.isCart = true
        this.getProjectGoodsSku(itemOne)
      } else {
        if (itemOne.goodsNum > itemOne.stock) return this.$utils.showToast({ title: '不能大于商品库存' })
        this.simpleSkuEls(itemOne)
      }
    },
    simpleSkuEls(itemOne) {
      this.goodsLoad = 0
      this.scekillList.forEach(item => {
        if (itemOne.goodsId === item.goodsId) {
          item.goodsNum = itemOne.goodsNum
          item.selShow = true
          this.goodsLoad++
          if (this.goodsLoad === 1) {
            this.addShoppingCart(1, itemOne)
          }
        }
      })
    },
    onChangeGoodsNum(e, item) {
      item.goodsNum = e.mp.detail
    },
    // 判断数组是否存在某个key值
    checkArrInclude(arr, item, keyName) {
      let arrData = []
      if (arr.length !== 0) {
        arr.forEach(item => {
          arrData.push(item[keyName])
        })
      }
      if (arrData.includes(item)) {
        return true
      } else {
        return false
      }
    },
    cartBadgeEls(value, item, params) {
      if (this.$pt.getStorageSync('fastGoods')) {
        this.fastGoods = this.$pt.getStorageSync('fastGoods')
      } else {
        this.fastGoods = []
      }
      // 多规格类型
      if (params !== undefined) {
        // 多规格加、减数量缓存处理
        // console.log(params)
        if (this.fastGoods.length !== 0) {
          // 判段商品是否已经存在
          if (this.checkArrInclude(this.fastGoods, params.goodsId, 'goodsId')) {
            // 已存在goodsId商品
            this.fastGoods.forEach(itemGoods => {
              if (itemGoods.goodsId === params.goodsId) {
                // 已存在skuId商品
                if (this.checkArrInclude(itemGoods.skuList, params.skuId, 'skuId')) {
                  itemGoods.goodsNum = null
                  itemGoods.sellPrice = null
                  itemGoods.skuList.forEach(itemSku => {
                    if (itemSku.skuId === params.skuId) {
                      itemSku.goodsNum = itemSku.goodsNum + params.goodsNum
                      itemSku.sellPrice = (Math.round((itemSku.goodsNum * params.promotionPrice) * 100) / 100).toFixed(2)
                    }
                    itemGoods.goodsNum += itemSku.goodsNum
                    itemGoods.sellPrice += Math.round(itemSku.promotionPrice * 100) / 100
                  })
                  itemGoods.sellPrice = (Math.round(itemGoods.promotionPrice * 100) / 100).toFixed(2)
                } else {
                  itemGoods.skuList.push({
                    skuId: params.skuId,
                    goodsNum: params.goodsNum,
                    sellPrice: (Math.round((params.goodsNum * params.promotionPrice) * 100) / 100).toFixed(2)
                  })
                  itemGoods.goodsNum = null
                  itemGoods.sellPrice = null
                  itemGoods.skuList.forEach(itemSku => {
                    itemGoods.goodsNum += itemSku.goodsNum
                    itemGoods.sellPrice += Math.round(itemSku.promotionPrice * 100) / 100
                  })
                  itemGoods.sellPrice = (Math.round(itemGoods.promotionPrice * 100) / 100).toFixed(2)
                }
              }
            })
          } else {
            // 新增商品
            let skuData = []
            skuData.push({
              skuId: params.skuId,
              goodsNum: params.goodsNum,
              sellPrice: (Math.round((params.goodsNum * params.promotionPrice) * 100) / 100).toFixed(2)
            })
            let goodsNum = null
            let sellPrice = null
            skuData.forEach(item => {
              goodsNum += item.goodsNum
              sellPrice += Math.round(item.promotionPrice * 100) / 100
            })
            this.fastGoods.push({
              goodsId: params.goodsId,
              skuFlag: 1,
              skuList: skuData,
              goodsNum: goodsNum,
              sellPrice: (Math.round(sellPrice * 100) / 100).toFixed(2)
            })
          }
        } else {
          let skuData = []
          skuData.push({
            skuId: params.skuId,
            goodsNum: params.goodsNum,
            sellPrice: (Math.round((params.goodsNum * params.promotionPrice) * 100) / 100).toFixed(2)
          })
          let goodsNum = null
          let sellPrice = null
          skuData.forEach(item => {
            goodsNum += item.goodsNum
            sellPrice += Math.round(item.promotionPrice * 100) / 100
          })
          this.fastGoods.push({
            goodsId: params.goodsId,
            skuFlag: 1,
            skuList: skuData,
            goodsNum: goodsNum,
            sellPrice: (Math.round(sellPrice * 100) / 100).toFixed(2)
          })
        }
        setFastGoods(this.fastGoods)
        return
      }
      // 单规格类型
      if (value === 1) {
        // 单规格加数量缓存处理
        if (this.fastGoods.length !== 0) {
          // 判段商品是否已经存在
          if (this.checkArrInclude(this.fastGoods, item.goodsId, 'goodsId')) {
            // 已存在商品
            this.fastGoods.forEach(itemGoods => {
              if (itemGoods.goodsId === item.goodsId) {
                itemGoods.goodsNum = item.goodsNum
                itemGoods.sellPrice = (Math.round((item.goodsNum * item.promotionPrice) * 100) / 100).toFixed(2)
              }
            })
          } else {
            // 新增商品
            this.fastGoods.push({
              goodsId: item.goodsId,
              skuFlag: 0,
              goodsNum: item.goodsNum,
              sellPrice: (Math.round((item.goodsNum * item.promotionPrice) * 100) / 100).toFixed(2)
            })
          }
        } else {
          this.fastGoods.push({
            goodsId: item.goodsId,
            skuFlag: 0,
            goodsNum: item.goodsNum,
            sellPrice: (Math.round((item.goodsNum * item.promotionPrice) * 100) / 100).toFixed(2)
          })
        }
        setFastGoods(this.fastGoods)
      } else {
        // 单规格减数量缓存处理
        this.fastGoods.forEach((itemGoods, indexGoods) => {
          if (itemGoods.goodsId === item.goodsId) {
            // 已存在商品
            itemGoods.goodsNum--
            itemGoods.sellPrice = (Math.round((itemGoods.goodsNum * item.promotionPrice) * 100) / 100).toFixed(2)
            if (!itemGoods.goodsNum) {
              this.fastGoods.splice(indexGoods, 1)
            }
          }
        })
        setFastGoods(this.fastGoods)
      }
      // 清除购物车角标数
      if (!this.fastGoods.length) {
        this.$pt.removeStorageSync('fastGoods')
      }
    },
    showFastNum(item) {
      if (!this.fastGoods.length) return
      this.fastGoods.forEach(itemGoods => {
        if (itemGoods.goodsId === item.goodsId) {
          item.selShow = true
          if (itemGoods.skuFlag) {
            item.goodsNum = itemGoods.goodsNum
          } else {
            item.goodsNum = itemGoods.goodsNum
          }
        }
      })
    },
    addShoppingCart(value, good) {
      this.cartBadgeEls(value, good)
      const shoppingCart = {
        customerId: this.getCustomerId,
        goodsId: good.goodsId,
        goodsNum: value,
        memberId: this.getMemberId,
        goodsType: good.goodsType,
        shoppingCartType: good.goodsType === 30 || good.goodsType === 31 || good.goodsType === 32 ? 3 : 1
      }
      addShoppingCart(shoppingCart).then((response) => {
        if (response.isError) return
        if (value === 1) this.$utils.showToast({title: '加入购物车成功'})
      }).catch(() => {
      })
    },
    // 活动删除
    removeItem(item) {
      let statusTips = ''
      if (item.status) {
        statusTips = '移除后将对买家不显示该商品是否确认移除该商品？'
      } else {
        statusTips = '重新加入后将对买家显示该商品'
      }
      this.$pt.showModal({
        content: statusTips,
        success: res => {
          if (res.confirm) {
            let statusVal = null
            if (item.status) {
              statusVal = 0
            } else {
              statusVal = 1
            }
            saveByPromotionGoodsId({
              promotionGoodsId: item.promotionGoodsId,
              memberId: this.getCustomerId,
              status: statusVal
            }).then(response => {
              if (response.isError) return
              this.scekillList = []
              this.pullLoad.finished = false
              this.params.currentPage = 1
              this.getListPromotion()
            })
          }
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: white;
  min-height: 100vh;
  .tabs-bar {
    height: 55px;
    overflow-x: auto;
    white-space: nowrap;
    width: 100%;
    text-align: center;
    background-size: 100%;
    background-repeat: no-repeat;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
    &::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    .tabs-tab {
      display: inline-block;
      color: rgba(255, 255, 255, 0.72);
      text-align: center;
      width: 22%;
      .active-status {
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        margin: auto;
      }
      &_active {
        color: white;
        .active-status {
          width: 63px;
          height: 20px;
          text-align: center;
          line-height: 20px;
          background: white;
          border-radius: 10px;
          color: #ea2a05;
        }
      }
    }
  }
}
.main {
  .section {
    .countdown-wrap {
      .seckill-content {
        border-radius: 15px 15px 0 0;
        background: white;
        // min-height: calc(100vh - 170px);
        margin-top: 2px;
        .border-b {
          border-bottom: 0.5px solid #f3f3f3;
        }
        .count-down {
          .square-block {
            background: #333;
            border-radius: 1px;
            font-size: 13px;
            color: white;
            // width: 18px;
            padding: 0 2px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            display: inline-block;
          }
          .square-t {
            display: inline-block;
            color: #333;
            width: 11px;
            height: 15px;
            line-height: 15px;
            text-align: center;
          }
          .square-d {
            width: unset;
          }
        }
      }
      .seckill-list {
        .seckill-goods {
          .goods-img {
            position: relative;
            .sell-out {
              position: absolute;
              width: 100%;
              height: 100%;
              left: 0;
              top: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              overflow: hidden;
              color: rgba(254, 254, 254, 0.7);
              background: rgba(0, 0, 0, 0.5);
              font-size: 12px;
              .delete-css {
                position: absolute;
                transform: rotate(-45deg);
                background: rgba(255, 255, 255, 0.58);
                height: 20px;
                line-height: 20px;
                font-size: 12px;
                width: 100%;
                text-align: center;
                color: #000;
                left: -35px;
                top: 10px;
              }
            }
          }
          .goods-content {
            .nameplate {
              font-size: 0;
              .left {
                background: #fed807;
                color: #272727;
                font-size: 12px;
                display: inline-block;
                padding: 0 5px;
                line-height: 16px;
              }
              .right {
                background: #272727;
                color: white;
                font-size: 12px;
                display: inline-block;
                border-radius: 0 4px 4px 0;
                padding: 0 5px;
                line-height: 16px;
              }
            }
            .price-row {
              line-height: 1;
              display: flex;
              align-items: flex-end;
              justify-content: left;
              .now-price {
                color: #eb4e4e;
                max-width: 65px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                word-break: break-word;
              }
              .font-over {
                max-width: 51px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                word-break: break-word;
              }
            }
            .icon-bar {
              .icon-base {
                width: 24px;
                height: 24px;
                border-radius: 50%;
                font-size: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: 900;
              }
              .icon-add {
                background: #ffd800;
              }
              .icon-delete {
                background: #fff9d7;
                transform: rotate(45deg);
              }
            }
          }
        }
      }
    }
  }
}
.nodata {
  margin-top: 135px;
}
.foot-cart {
  position: fixed;
  height: 49px;
  width: 100%;
  background-color: white;
  left: 0;
  bottom: 0;
  box-shadow: 0 0 5px rgba(155, 155, 155, 0.15);
  .content {
    padding-left: 15px;
    padding-right: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .color-price {
      color: #ff593e;
    }
  }
  .go-cart {
    font-size: 16px;
    // background-color: #FFE200;
    height: 49px;
    line-height: 49px;
    width: 133.5px;
    text-align: center;
  }
}
</style>
